<template>
  <div>
    <div>
      <div>产品报价</div>
      <el-input class="context" v-model="radio2" style="max-width: 300px;"/><br/><br/>
      <!-- if判断展示 -->
      <div>
        <!-- 如果是产品询价单 -->
        <div v-if="radio2 == 1" class="context">
          <el-card shadow="hover">
            <span>产品信息</span>
            <hr />
            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="name" label="产品名称" width="120" header-align="center" align="center" />
              <el-table-column label="图号" width="100" header-align="center" align="center" />
              <el-table-column label="材质" width="100" header-align="center" align="center" />
              <el-table-column label="件数(pcs)" width="100" header-align="center" align="center" />
              <el-table-column label="预计重量(kg/件)" width="100" header-align="center" align="center" />
              <el-table-column label="单价(USD/pc)" width="100" header-align="center" align="center" />
              <el-table-column label="产品分类" header-align="center" align="center" />
            </el-table>
            <br /><span>运费:xxxx</span><br /><br />
            <div style="border: 1px solid burlywood">
              <el-row style="border-bottom: 1px solid burlywood">
                <el-col style="border-right: 1px solid burlywood;" :span="4">
                  <span>总重量</span>
                </el-col>
                <el-col style="border-right: 1px solid burlywood;" :span="3">
                  <span>xxx</span>
                </el-col>
                <el-col style="border-right: 1px solid burlywood;" :span="4">
                  <span>总金额</span>
                </el-col>
                <el-col style="border-right: 1px solid burlywood;" :span="3">
                  <span>xxx</span>
                </el-col>
                <el-col style="border-right: 1px solid burlywood;" :span="4">
                  <span>总托数</span>
                </el-col>
                <el-col style="border: 1px  burlywood;" :span="3">
                  <span>xxx</span>
                </el-col>
              </el-row>
              <el-row>
                <el-col style="border-right: 1px  solid  burlywood;" :span="4">
                  <span>预估总体积</span>
                </el-col>
                <el-col style="border-right: 1px  solid  burlywood;" :span="3">
                  <span>xxx</span>
                </el-col>
                <el-col style="border-right: 1px  solid  burlywood;" :span="4">
                  <span>预计交期(天)</span>
                </el-col>
                <el-col style="border-right: 1px  solid  burlywood;" :span="3">
                  <span>xxx</span>
                </el-col>
                <el-col style="border-right: 1px  solid  burlywood;" :span="4">
                  <span>报价有效期</span>
                </el-col>
                <el-col style="border: 1px    burlywood;" :span="3">
                  <span>xxx</span>
                </el-col>
              </el-row>
            </div>
          </el-card>
        </div>
        <!-- 如果是筛网询价单 -->
        <div v-if="radio2 == 2" class="context">
          <el-card shadow="hover">
            <span>产品信息</span>
            <hr />
            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="name" label="产品名称" width="120" header-align="center" align="center" />
              <el-table-column label="长(mm)" width="100" header-align="center" align="center" />
              <el-table-column label="宽(mm)" width="100" header-align="center" align="center" />
              <el-table-column label="丝径(mm)" width="100" header-align="center" align="center" />
              <el-table-column label="孔径(mm)" width="100" header-align="center" align="center" />
              <el-table-column label="数量(pcs)" width="100" header-align="center" align="center" />
              <el-table-column label="材质(Material)" header-align="center" align="center" />
              <el-table-column label="折钩包边" header-align="center" align="center" />
              <el-table-column label="编织类型" header-align="center" align="center" />
              <el-table-column label="预计单重(kg/件)" header-align="center" align="center" />
              <el-table-column label="单价(USD/pc)" header-align="center" align="center" />
              <el-table-column label="产品分类" header-align="center" align="center" />
            </el-table>
            <br /><span>运费:xxxx</span><br /><br />
            <div style="border: 1px solid burlywood">
              <el-row style="border-bottom: 1px solid burlywood">
                <el-col style="border-right: 1px solid burlywood;" :span="4">
                  <span>预计总重量</span>
                </el-col>
                <el-col style="border-right: 1px solid burlywood;" :span="3">
                  <span>xxx</span>
                </el-col>
                <el-col style="border-right: 1px solid burlywood;" :span="4">
                  <span>总金额</span>
                </el-col>
                <el-col style="border-right: 1px solid burlywood;" :span="3">
                  <span>xxx</span>
                </el-col>
                <el-col style="border-right: 1px solid burlywood;" :span="4">
                </el-col>
                <el-col style="border: 1px  burlywood;" :span="3">
                </el-col>
              </el-row>
              <el-row>
                <el-col style="border-right: 1px  solid  burlywood;" :span="4">
                  <span>预估总体积(方)</span>
                </el-col>
                <el-col style="border-right: 1px  solid  burlywood;" :span="3">
                  <span>xxx</span>
                </el-col>
                <el-col style="border-right: 1px  solid  burlywood;" :span="4">
                  <span>预计交期(天)</span>
                </el-col>
                <el-col style="border-right: 1px  solid  burlywood;" :span="3">
                  <span>xxx</span>
                </el-col>
                <el-col style="border-right: 1px  solid  burlywood;" :span="4">
                  <span>报价有效期</span>
                </el-col>
                <el-col style="border: 1px    burlywood;" :span="3">
                  <span>xxx</span>
                </el-col>
              </el-row>
            </div>
          </el-card>
        </div>
        <!-- 如果是托辊询价单 -->
        <div v-if="radio2 == 3" class="context">
          <el-card shadow="hover">
            <span>产品信息</span>
            <hr />
            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="name" label="产品名称" width="120" header-align="center" align="center" />
              <el-table-column label="A" width="100" header-align="center" align="center" />
              <el-table-column label="B" width="100" header-align="center" align="center" />
              <el-table-column label="C" width="100" header-align="center" align="center" />
              <el-table-column label="数量(pcs)" width="100" header-align="center" align="center" />
              <el-table-column label="材质(Material)" width="100" header-align="center" align="center" />
              <el-table-column label="折钩包边" header-align="center" align="center" />
              <el-table-column label="编织类型" header-align="center" align="center" />
              <el-table-column label="预计单重(kg/件)" header-align="center" align="center" />
              <el-table-column label="单价(USD/pc)" header-align="center" align="center" />
              <el-table-column label="产品分类" header-align="center" align="center" />
            </el-table>
            <br /><span>运费:xxxx</span><br /><br />
            <div style="border: 1px solid burlywood">
              <el-row style="border-bottom: 1px solid burlywood">
                <el-col style="border-right: 1px solid burlywood;" :span="4">
                  <span>预计总重量</span>
                </el-col>
                <el-col style="border-right: 1px solid burlywood;" :span="3">
                  <span>xxx</span>
                </el-col>
                <el-col style="border-right: 1px solid burlywood;" :span="4">
                  <span>总金额</span>
                </el-col>
                <el-col style="border-right: 1px solid burlywood;" :span="3">
                  <span>xxx</span>
                </el-col>
                <el-col style="border-right: 1px solid burlywood;" :span="4">
                </el-col>
                <el-col style="border: 1px  burlywood;" :span="3">
                </el-col>
              </el-row>
              <el-row>
                <el-col style="border-right: 1px  solid  burlywood;" :span="4">
                  <span>预估总体积(方)</span>
                </el-col>
                <el-col style="border-right: 1px  solid  burlywood;" :span="3">
                  <span>xxx</span>
                </el-col>
                <el-col style="border-right: 1px  solid  burlywood;" :span="4">
                  <span>预计交期(天)</span>
                </el-col>
                <el-col style="border-right: 1px  solid  burlywood;" :span="3">
                  <span>xxx</span>
                </el-col>
                <el-col style="border-right: 1px  solid  burlywood;" :span="4">
                  <span>报价有效期</span>
                </el-col>
                <el-col style="border: 1px    burlywood;" :span="3">
                  <span>xxx</span>
                </el-col>
              </el-row>
            </div>
          </el-card>
        </div>
      </div>
      <!-- 尾部 -->
      <!-- 底部 保存后需要向父组件传递一个信息,已告诉父组件需要发送请求-->
      <Buttom @yes="yes" />
    </div>
  </div>
</template>



<script setup>
import { useRouter, useRoute } from "vue-router";
import { ref, onMounted } from "vue";
import Buttom from "./buttom.vue";

//路由
const router = useRouter()
const route = useRoute()

const radio2 = ref(1);

//接收后台数据--通过传入的row,作为条件,查询具体的产品信息返回并接受
const tableData = ref([{
  name: "lzw"
}])

//接收传递数据
const row = ref()

//在页面加载前就应该获得这个数据
//所以后续需要加入钩子函数OnMounted
row.value = route.query

//保存成功,发送请求并路由跳转
function yes() {
  //内部调用其他的方法,用于发送请求

  //请求后路由跳转
  router.push({ name: "InquiryManagement" })
}

</script>

<style scoped>
.context {
  margin-left: 10%;
  margin-right: 10%;
  margin-bottom: 30px;
}

.el-col {
  padding: 20px 5px 20px 5px
}
</style>
